<template>
	<view class="content">
		<view class="bg"></view>
		<u-navbar fixed title="上传乐谱" bgColor="transparent" placeholder leftIcon=""></u-navbar>

		<scroll-view class="box" :scroll-y="true">
			<view class="box1">
				<view class="box1_3" @click="changeOne">
					<text class="box1_1">选择一级分类</text>
					<text class="box1_2">{{ formObj.f1name }}</text>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<uni-icons type="plus" size="30" color="#999999" @click="changeAdd(0)"></uni-icons>
			</view>
			<view class="box1">
				<view class="box1_3" @click="changeTwo">
					<text class="box1_1">选择二级分类</text>
					<text class="box1_2">{{ formObj.f2name }}</text>
					<uni-icons type="right" size="20" color="#999999"></uni-icons>
				</view>
				<uni-icons type="plus" size="30" color="#999999" @click="changeAdd(1)"></uni-icons>
			</view>
			<view class="box2">
				<input type="text" placeholder="请输入曲谱名称" v-model="formObj.name" />
			</view>
			<view class="box2_1">
				<input type="text" placeholder="请输入作者" v-model="formObj.author" />
			</view>
			<p>请选择上传形式</p>
			<view class="box3">
				<view :class="{ active: formObj.type == 0 }" @click="changeType(0)">图谱乐谱</view>
				<view :class="{ active: formObj.type == 1 }" @click="changeType(1)">PDF乐谱</view>
			</view>

			<p>请上传图片或PDF</p>

			<basic-drag v-model="formObj.files" itemKey="id" :column="3" itemHeight="230" @end="dragEnd">
				<template v-slot:item="{ element, index }">
					<view class="wrapper">
						<image class="image" mode="aspectFill" :src="element.url" @click="changePreview(element, index)" />
						<uni-icons class="close-icon" type="clear" size="30" @click="deletePic(index)"></uni-icons>
					</view>
				</template>
			</basic-drag>

			<view class="box4" @click="handleupload1" v-if="formObj.type == 0">
				<uni-icons class="default-icon" type="camera-filled" size="40"></uni-icons>
			</view>

			<view class="box4" @click="handleupload" v-if="formObj.type == 1 && formObj.files.length == 0">
				<uni-icons class="default-icon" type="camera-filled" size="40"></uni-icons>
			</view>
		</scroll-view>

		<view class="senbtn" @click="changePost">
			<text>保存</text>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :is-mask-click="false">
			<view class="popbox">
				<uni-icons class="btn" type="closeempty" size="30" color="#102D40" @click="changClose(false)"></uni-icons>
				<view class="pop_title">分类名称</view>
				<view class="pop_input">
					<input type="text" placeholder="请输入分类名称" v-model="menuName" />
				</view>
				<view class="btn1" @click="changClose(true)">保存</view>
			</view>
		</uni-popup>

		<u-picker :show="pickerShow" :itemHeight="88" keyName="name" :columns="columns" @confirm="confirm" @cancel="pickerShow = false"></u-picker>

		<u-picker :show="pickerShow1" :itemHeight="88" keyName="name" :columns="columns1" @confirm="confirm" @cancel="pickerShow1 = false"></u-picker>

		<nkselectfile v-model="selectfileStatus" :filterArr="['pdf']" titel="选择文件" btnText="确定" @confirm="fileSelect" @change="fileChange"></nkselectfile>
	</view>
</template>

<script>
import API from '@/utils/api.js';
import { handleTree } from '@/utils/index.js';
import { pathToBase64, base64ToPath } from 'image-tools';
import nkselectfile from '@/components/nk-select-file/nk-select-file.vue';
const pdftoimage = uni.requireNativePlugin('pdftoimage');

const mediaPicker = uni.requireNativePlugin('Ba-MediaPicker');

import BasicDrag from '@/components/basic-drag/index.vue';

export default {
	components: {
		nkselectfile,
		BasicDrag
	},
	data() {
		return {
			addtype: 0,
			columns: [],
			columns1: [],
			pickerShow: false,
			pickerShow1: false,

			selectTypeVal: 0,
			formObj: {
				f1index: null,
				f1name: '',
				f2index: null,
				f2name: '',
				name: '',
				author: '',
				type: 0,
				files: []
			},

			typsData: [],
			alltypesData: [],
			menuName: '',

			selectfileStatus: false,

			songsCount: 0,

			imageCount: 0,

			pdfImageData: []
		};
	},
	computed: {
		chooseNum() {
			return 9 - this.formObj.files.length;
		}
	},
	methods: {
		// 选择一级分类
		changeOne() {
			console.log('选择一级分类');
			this.selectTypeVal = 0;
			this.columns = [this.typsData];
			this.pickerShow = true;
		},

		// 选择二级分类
		changeTwo() {
			console.log('选择二级分类', this.typsData[this.formObj.f1index]);
			if (!this.formObj.f1name) {
				uni.showToast({
					title: '请先选择一级分类',
					icon: 'none'
				});
				return;
			}
			this.selectTypeVal = 1;
			this.columns1 = [this.typsData[this.formObj.f1index].children];
			this.pickerShow1 = true;
		},

		// 确认分类选择
		confirm(e) {
			console.log(this.selectTypeVal, e, '确认的数据');
			if (this.selectTypeVal === 0) {
				this.formObj.f1index = e.indexs[0];
				this.formObj.f1name = e.value[0].name;

				this.formObj.f2index = null;
				this.formObj.f2name = '';
			} else {
				this.formObj.f2index = e.indexs[0];
				this.formObj.f2name = e.value[0].name;
				console.log(this.formObj, '选择的参数');
			}
			this.pickerShow1 = false;
			this.pickerShow = false;
		},

		// 添加分类
		changeAdd(type) {
			this.addtype = type;
			if (type == 1 && !this.formObj.f1name) {
				uni.showToast({
					title: '请先选择一级分类',
					icon: 'none'
				});
				return;
			}
			this.$refs.popup.open();
		},

		// 确认添加
		changClose(val) {
			if (val) {
				if (!this.menuName) {
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					});
					return;
				}
				if (this.addtype == 0) {
					API.recordSalary({
						id: this.alltypesData[this.alltypesData.length - 1].id + 1,
						name: this.menuName,
						father_id: 0,
						user: 1
					}).then((res) => {
						console.log(res, '一级分类');
						this.getList();
					});
				} else {
					API.recordSalary({
						id: this.alltypesData[this.alltypesData.length - 1].id + 1,
						name: this.menuName,
						father_id: this.typsData[this.formObj.f1index].id,
						user: 1
					}).then((res) => {
						console.log(res, '二级分类');
						this.getList();
					});
				}
			}
			this.menuName = '';
			this.$refs.popup.close();
		},

		// 分类类型选择
		changeType(index) {
			this.formObj.type = index;
			// this.formObj.files = [];
		},

		// 上传图片
		handleupload1() {
			mediaPicker.selectPicture(
				{
					onlyCamera: false,
					mediaType: 1,
					single: false,
					singleBack: false,
					max: 9,
					maxVideo: 1,
					compress: true,
					crop: false,
					selectedList: this.formObj.files.map((e) => e.url), //已选择项回显，注意：需传选择回调返回的data数组
					isCamera: false
				},
				(ret) => {
					//回调参数
					console.log('选择的图片', ret);
					if (ret.data) {
						let arr = [];
						let choosefiles = ret.data;
						for (let i = 0; i < choosefiles.length; i++) {
							arr.push(pathToBase64(choosefiles[i].compressPath));
						}
						Promise.all(arr).then((res) => {
							console.log('base64图片', res);
							for (let i = 0; i < res.length; i++) {
								this.formObj.files.push({
									id: this.imageCount + i + 1 + this.formObj.files.length,
									url: res[i],
									father_id: this.songsCount + 1
								});
							}
						});
					}
				}
			);
		},

		// 排序结束
		dragEnd(e) {
			console.log('排序结束', e);
			this.formObj.files = e;
		},

		// 预览
		changePreview(item, index) {
			let data = this.formObj.files.map((e) => e.url);
			let promise = [];
			for (let i = 0; i < data.length; i++) {
				promise.push(base64ToPath(data[i]));
			}
			Promise.all(promise).then((res) => {
				uni.previewImage({
					current: index,
					urls: res
				});
			});
		},

		// 删除图片
		deletePic(index) {
			this.formObj.files.splice(index, 1);
		},

		// 上传文件
		handleupload() {
			console.log('选择文件');
			// 查询是否有android.permission.READ_EXTERNAL_STORAGE权限访问
			plus.android.requestPermissions(
				['android.permission.READ_EXTERNAL_STORAGE'],
				(permissions) => {
					console.log(permissions, '权限申请');
					this.selectfileStatus = true;
				},
				(e) => {
					uni.showToast({
						icon: 'none',
						title: '请确认授权访问',
						duration: 2000
					});
				}
			);
		},

		// 选择PDF
		fileSelect(e) {
			let url = e[0].url;
			console.log(url, '选择的pdf');
			uni.showLoading({
				title: '加载中'
			});
			pdftoimage.changePdfToImage(url, (res) => {
				console.log(res, '转换的数据');
				let data = res.data;
				for (let i = 0; i < data.length; i++) {
					let base64 = 'data:image/jpeg;base64,' + data[i];
					this.formObj.files.push({
						id: this.imageCount + i + 1 + this.formObj.files.length,
						url: base64,
						father_id: this.songsCount + 1
					});
				}
				console.log('PDF的图片', this.formObj.files);
				uni.hideLoading();
			});
		},

		fileChange(e) {
			this.selectfileStatus = false;
		},

		// 清除默认数据
		restData() {
			this.formObj = {
				f1index: null,
				f1name: '',
				f2index: null,
				f2name: '',
				name: '',
				author: '',
				type: 0,
				files: []
			};
		},

		// 保存数据、
		changePost() {
			console.log(this.formObj, '查看组件数据');
			if (!this.formObj.f1name) {
				uni.showToast({
					title: '请先选择一级分类',
					icon: 'none'
				});
				return;
			}
			if (!this.formObj.f2name) {
				uni.showToast({
					title: '请先选择二级分类',
					icon: 'none'
				});
				return;
			}
			if (!this.formObj.name) {
				uni.showToast({
					title: '请输入曲谱名称',
					icon: 'none'
				});
				return;
			}
			if (!this.formObj.files.length) {
				uni.showToast({
					title: this.formObj.type == 0 ? '请上传曲谱图片' : '请上传曲谱PDF',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '创建中...'
			});
			let arr = [];
			for (let i = 0; i < this.formObj.files.length; i++) {
				arr.push(
					API.recordImage({
						id: this.formObj.files[i].id,
						url: '',
						father_id: this.formObj.files[i].father_id
					})
				);
				arr.push(API.createFlie(this.formObj.files[i], `${this.formObj.files[i].father_id}${this.formObj.files[i].id}`));
			}
			arr.push(
				API.recordSong({
					id: this.songsCount + 1,
					name: this.formObj.name,
					usls: this.formObj.files.map((e) => e.id).join(','),
					type: this.formObj.type,
					author: this.formObj.author,
					album: '',
					father_id: this.typsData[this.formObj.f1index].children[this.formObj.f2index].id,
					user: 1
				})
			);
			Promise.all(arr).then(
				(res) => {
					console.log(res, '添加的歌曲');
					uni.hideLoading();
					uni.showToast({
						icon: '',
						title: '添加成功'
					});
					this.restData();
					uni.switchTab({
						url: '/pages/ownmusic/ownmusic'
					});
				},
				(err) => {
					console.log('失败', err);
					uni.hideLoading();
					this.restData();
					uni.showToast({
						icon: '',
						title: '添加失败'
					});
				}
			);
		},

		// 查询分类数据
		getList() {
			API.getAllCategories().then((res) => {
				this.alltypesData = res;
				this.typsData = handleTree(res);
				console.log(res, this.typsData, '获取一级分类');
			});
		},

		// 歌曲数据
		getSongList() {
			API.getMaxIdByTableName(1).then((res) => {
				console.log(res, '查询的音乐最大ID数量');
				this.songsCount = res;
			});
		},

		// 图片数据
		getImageList() {
			API.getMaxIdByTableName(2).then((res) => {
				console.log(res, '查询的图片数量');
				this.imageCount = res;
			});
		},

		deleteChange() {
			API.deleteRecord(0, 0).then((res) => {
				console.log(res, '删除成功');
				this.getList();
			});
		}
	},
	onLoad() {
		this.restData();
	},
	onShow() {
		plus.screen.lockOrientation('portrait-primary');
		this.getList();
		this.getSongList();
		this.getImageList();
		// this.deleteChange()
	}
};
</script>

<style lang="scss" scoped>
/* 针对手机设备的样式 */
@media only screen and (max-width: 600px) {
	.content {
		position: relative;
		overflow-x: hidden;

		.bg {
			width: calc(100vw + 270rpx);
			height: 282rpx;
			background-color: rgba(23, 183, 109, 0.61);
			filter: blur(180rpx);
			position: absolute;
			top: 0rpx;
			left: -210rpx;
			z-index: 1;
		}

		.box {
			width: 100%;
			height: calc(100vh - 44rpx - var(--status-bar-height));
			padding: 0 20rpx;
			padding-top: 56rpx;
			// background-color: #17b76d;
			position: relative;
			z-index: 5;
			padding-bottom: 110rpx;
			box-sizing: border-box;

			.box1,
			.box2,
			.box2_1 {
				height: 92rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #c4c4c4;
				display: flex;
				align-items: center;
				padding: 0 24rpx 0 22rpx;
				margin-bottom: 12rpx;

				.box1_3 {
					flex: 1;
					width: 100%;
					display: flex;
					align-items: center;

					.box1_1,
					.box1_2 {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
					}

					.box1_2 {
						flex: 1 0;
						width: 0;
						overflow: hidden;
						text-align: right;
					}
				}
			}

			.box2,
			.box2_1 {
				input {
					flex: 1 0;
				}
			}

			.box2_1 {
				margin-bottom: 38rpx;
			}

			p {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 46rpx;
				text-align: left;
				margin-bottom: 30rpx;
			}

			.box3 {
				display: flex;
				margin-bottom: 48rpx;

				view {
					width: 192rpx;
					height: 72rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 72rpx;
					text-align: center;
					background: #17b76d;
				}

				view:nth-child(1) {
					margin-right: 22rpx;
				}

				.active {
					background: #f3650d;
				}
			}

			.box4 {
				width: 230rpx;
				height: 230rpx;
				border: 1rpx solid #ddd;
				border-radius: 20rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.wrapper {
				width: 230rpx;
				height: 230rpx;
				border: 1rpx solid #ddd;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				color: #333333;

				.image {
					width: 229rpx;
					height: 229rpx;
				}

				.close-icon {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}

		.senbtn {
			width: 560rpx;
			height: 80rpx;
			background: #17b76d;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20rpx;
			z-index: 10;
			text-align: center;
			line-height: 80rpx;

			text {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36rpx;
				color: #ffffff;
			}
		}

		.popbox {
			width: 100%;
			height: 478rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 0 74rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.btn {
				position: absolute;
				top: 30rpx;
				right: 40rpx;
			}

			.pop_title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				line-height: 52rpx;
				text-align: center;
			}

			.pop_input {
				width: 100%;
				height: 92rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #c4c4c4;
				padding: 0 30rpx;

				input {
					width: 100%;
					height: 90rpx;
				}
			}

			.btn1 {
				width: 100%;
				height: 92rpx;
				background: #17b76d;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 92rpx;
				text-align: center;
			}
		}
	}
}

/* 针对平板设备的样式 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
	.content {
		position: relative;
		overflow-x: hidden;

		.bg {
			width: calc(100vw + 270px);
			height: 282px;
			background-color: rgba(23, 183, 109, 0.61);
			filter: blur(180px);
			position: absolute;
			top: 0px;
			left: -210px;
			z-index: 1;
		}

		.box {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			padding: 0 20px;
			padding-top: 56px;
			// background-color: #17b76d;
			position: relative;
			z-index: 5;
			padding-bottom: 110px;
			box-sizing: border-box;

			.box1,
			.box2,
			.box2_1 {
				height: 92px;
				background: #ffffff;
				border-radius: 16px 16px 16px 16px;
				border: 1px solid #c4c4c4;
				display: flex;
				align-items: center;
				padding: 0 24px 0 22px;
				margin-bottom: 12px;

				.box1_3 {
					flex: 1;
					width: 100%;
					display: flex;
					align-items: center;

					.box1_1,
					.box1_2 {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28px;
						color: #333333;
						line-height: 40px;
						text-align: left;
					}

					.box1_2 {
						flex: 1 0;
						width: 0;
						overflow: hidden;
						text-align: right;
					}
				}
			}

			.box2,
			.box2_1 {
				input {
					flex: 1 0;
				}
			}

			.box2_1 {
				margin-bottom: 38px;
			}

			p {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32px;
				color: #333333;
				line-height: 46px;
				text-align: left;
				margin-bottom: 30px;
			}

			.box3 {
				display: flex;
				margin-bottom: 48px;

				view {
					width: 192px;
					height: 72px;
					border-radius: 12px 12px 12px 12px;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32px;
					color: #ffffff;
					line-height: 72px;
					text-align: center;
					background: #17b76d;
				}

				view:nth-child(1) {
					margin-right: 22px;
				}

				.active {
					background: #f3650d;
				}
			}

			.box4 {
				width: 230px;
				height: 230px;
				border: 1px solid #ddd;
				border-radius: 20px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.wrapper {
				width: 230px;
				height: 230px;
				border: 1px solid #ddd;
				border-radius: 20px;
				overflow: hidden;
				position: relative;
				color: #333333;

				.image {
					width: 229px;
					height: 229px;
				}

				.close-icon {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}

		.senbtn {
			width: 560px;
			height: 80px;
			background: #17b76d;
			border-radius: 12px 12px 12px 12px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;
			z-index: 10;
			text-align: center;
			line-height: 80px;

			text {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36px;
				color: #ffffff;
			}
		}

		.popbox {
			width: 100%;
			height: 478px;
			background: #ffffff;
			border-radius: 40px 40px 0px 0px;
			padding: 0 74px;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.btn {
				position: absolute;
				top: 30px;
				right: 40px;
			}

			.pop_title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 36px;
				color: #000000;
				line-height: 52px;
				text-align: center;
			}

			.pop_input {
				width: 100%;
				height: 92px;
				background: #ffffff;
				border-radius: 16px 16px 16px 16px;
				border: 1px solid #c4c4c4;
				padding: 0 30px;

				input {
					width: 100%;
					height: 90px;
				}
			}

			.btn1 {
				width: 100%;
				height: 92px;
				background: #17b76d;
				border-radius: 16px 16px 16px 16px;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32px;
				color: #ffffff;
				line-height: 92px;
				text-align: center;
			}
		}
	}
}
</style>
